<script setup>
import { computed, unref, onMounted, reactive, watch } from 'vue'
import menuItem from '@/components/Menu/src/components/menu-Item.vue'
import { useRouter, useRoute } from 'vue-router'
import { filter } from '@/utils'
import { useSysStore } from '@/store/modules/sysStore'
const sysStore = useSysStore()

const userouter = useRouter()
const route = useRoute()

const data = reactive({
  isInit: false,
  openKeys: [''], // 展开的子菜单 key 数组
  selectedKey: [''], // 选中的菜单项 key 数组
  menuItem: [], // 菜单列表
  crumbList: [], // 面包屑
  menuIcon: '',
  routePath: '',
  levelList: [] // 路由列表
})

// 过滤隐藏路由
const filterVisibleRoutes = (routes) => {
  return routes
    .filter((route) => !route.meta?.hidden)
    .map((route) => {
      const newRoute = { ...route }
      if (newRoute.children && newRoute.children.length > 0) {
        newRoute.children = filterVisibleRoutes(newRoute.children)
      }
      return newRoute
    })
}

data.menuItem = computed(() => {
  return filterVisibleRoutes(sysStore.curSysRoutes)
})

const menuOpen = (menuArr, val) => {
  data.selectedKey = []
  menuArr.forEach((v) => {
    if (v.name === val) {
      data.crumbList.push(v.meta.title)
      data.openKeys.push(v.name)
      return
    }
    if (v.children && v.children.length > 0) {
      data.crumbList.push(v.meta.title)
      data.openKeys.push(v.name)
      menuOpen(v.children, val)
    }
  })
  data.selectedKey = [data.openKeys[data.openKeys.length - 1]]
}

// 点击跳转路由
const goto = (val) => {
  data.routePath = val
  userouter.push({
    name: val
  })
}

const crumbChange = (val) => {
  data.openKeys = []
  data.crumbList = []
  const currentPath = route.matched.slice(-1)[0].path
  if (!data.menuItem) return
  data.levelList = filter(unref(data.menuItem), (node) => {
    return node.path === currentPath
  })
  if (data.levelList && data.levelList.length > 0) {
    data.menuIcon = data.levelList[0].meta.icon
    menuOpen(data.levelList, val)
  }
}

// 监听路由变化
watch(
  () => route.name,
  (val) => {
    if (val) {
      crumbChange(val)
    }
  },
  {
    immediate: true,
    deep: true
  }
)

onMounted(() => {
  data.isInit = true
  const val = userouter.currentRoute.value.name
  crumbChange(val)
})
</script>

<template>
  <a-menu
    mode="vertical"
    theme="dark"
    v-model:open-keys="data.openKeys"
    :selected-keys="data.selectedKey"
    :auto-open="false"
    :auto-open-selected="true"
    :level-indent="18"
    breakpoint="xl"
    :accordion="true"
    @menu-item-click="goto"
    :style="{
      width: '100%',
      paddingTop: '0px',
      height: '100%'
    }"
  >
    <menuItem :menu-list="data.menuItem"></menuItem>
  </a-menu>
</template>

<style lang="less" scoped>
.menu-mini {
  height: calc(100% - 358px) !important;

  :deep(.arco-menu-inner) {
    border-radius: 50px;

    .arco-menu-selected {
      background-color: rgb(var(--primary-6));
      color: var(--color-white);

      .arco-icon {
        color: var(--color-white);
      }
    }
  }
}

:deep(.arco-menu-inner) {
  padding: 26px 2px 0 !important;
  border-radius: 0;
  font-weight: bolder;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */

  &::-webkit-scrollbar {
    display: none;
  }

  .arco-menu-inline-header {
    display: flex;
    align-items: center;
  }

  .arco-menu-has-icon {
    color: var(--color-text-1);
    background-color: rgba(var(--color-menu-light-bg), 0.1);
  }

  .arco-menu-item.arco-menu-selected {
    background-color: rgb(var(--primary-6));
    color: var(--color-white);

    .arco-icon {
      color: var(--color-white);
    }
  }

  .arco-icon {
    color: var(--color-text-1);

    &:not(.arco-icon-down) {
      font-size: 20px;
    }
  }
}

:deep(.arco-menu-item-inner) {
  text-align: left;
}
</style>
<style>
.arco-trigger-menu {
  &::-webkit-scrollbar {
    width: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgb(var(--primary-6));
  }
}
</style>
